<script setup>
	import {
		computed,
		getCurrentInstance,
		ref
	} from 'vue'
	import {
		onLoad,
		onUnload,
	} from "@dcloudio/uni-app"
	import SinglePv from "@/pages_nbst/components/question/SinglePv.vue"
	import MultPv from "@/pages_nbst/components/question/MultPv.vue"
	import LingExamCard2 from "@/pages_nbst/components/LingExamCard2.vue"
	import {
		getFavQuestionReq,
		favQeustionReq,
	} from "@/pages_nbst/api/my.js"
	onLoad((q) => {
		const eventChannel = getCurrentInstance().proxy.getOpenerEventChannel();
		eventChannel.on('acceptDataFromOpenerPage', function(data) {
			if (q.type === 'fav') {
				favList.value = data.list.map(v => v.questionId)
			} else {
				getFavQuestionReq().then(res => {
					favList.value = res.map(v => v.question_id)
				})
			}
			dataListAll = data.list
			dataListWrong = dataListAll.filter(v => v.correct === 0)
			dataList = dataListAll
			initSwiper()
		})
	})
	onUnload(() => {
		uni.navigateBack()
	})

	const initSwiper = () => {
		swiperList.value = []
		swiperIndex.value = 0
		total.value = dataList.length

		dataList.forEach((v, i) => {
			if (i < 3) {
				swiperList.value.push(v)
			} else {
				swiperList.value.push({
					correct: v.correct,
					fav: v.fav
				})
			}
		})
	}

	const swiperIndex = ref(0)
	const total = ref(0)
	let dataList = []
	let dataListAll = []
	let dataListWrong = []
	const favList = ref([])
	const swiperList = ref([])
	const progress = computed(() => {
		return total.value === 0 ? 0 : (swiperIndex.value + 1) * 100 / total.value
	})
	const onHandlerSwiperChange = (e) => {
		swiperIndex.value = e.detail.current
		handleSwiperItem()
	}
	const handleSwiperItem = () => {
		[-2, -1, 0, 1, 2].forEach(v => {
			const ii = swiperIndex.value + v
			if (ii + 1 <= dataList.length && ii >= 0) {
				if (swiperList.value[ii]?.id === undefined) {
					// console.log('ii111-------', ii);
					swiperList.value[ii] = dataList[ii]
				}
			}
		});
	}

	const tabsRef = ref()
	const tabsList = ref([{
			name: "全部解析"
		},
		{
			name: "错误解析"
		}
	])
	const tabIndex = ref(0)
	const tabbarRef = ref()
	const fav = computed(() => {
		return favList.value.indexOf(dataList[swiperIndex.value]?.questionId) !== -1
	})
	const bodyHeight = computed(() => {
		return tabbarRef.value?.placeholderHeight ?
			`calc(100% - ${tabbarRef.value.placeholderHeight + 2 + tabsRef.value.tabsRect.height}px)` :
			`100%`
	})
	const onClickTabs = (item) => {
		if (item.index !== tabIndex.value) {
			tabIndex.value = item.index
			dataList = item.index === 0 ? dataListAll : dataListWrong
			initSwiper()
		}
	}
	const examCardShow = ref(false)
	const onClickJumpQ = (i) => {
		swiperIndex.value = i
		handleSwiperItem()
		setTimeout(() => {
			examCardShow.value = false
		}, 300)
	}
	const onClickFav = () => {
		let temp = {}
		if (favList.value.indexOf(dataList[swiperIndex.value].questionId) !== -1) {
			temp.type = 0
		}
		temp.bookQuestionId = dataList[swiperIndex.value].bookQuestionId
		temp.pageId = dataList[swiperIndex.value].pageId
		temp.examId = dataList[swiperIndex.value].examId
		favQeustionReq(dataList[swiperIndex.value].questionId, temp).then(res => {
			if (temp.type === 0) {
				favList.value = favList.value.filter(v => v !== dataList[swiperIndex.value].questionId)
			} else {
				favList.value.push(dataList[swiperIndex.value].questionId)
			}
		})
	}
</script>

<template>
	<uv-tabs ref="tabsRef" lineWidth="80" :scrollable="false" :list="tabsList" @click="onClickTabs"></uv-tabs>
	<uv-line-progress :percentage="progress" activeColor="#aaaaff" :showText="false" height="2" />
	<view v-if="total" style="position: absolute;top: 60rpx;right: 40rpx;">
		<span style="font-size: 50rpx;">{{swiperIndex+1}}</span> <span style="color: #a8a8a8;">/{{total}}</span>
	</view>
	<swiper :style="{height: bodyHeight}" @change="onHandlerSwiperChange" :current="swiperIndex">
		<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
			<view style="height: 20rpx;"></view>
			<view style="padding: 20rpx;">
				<SinglePv v-if="item.type === 1" :data="item" />
				<MultPv v-else-if="item.type === 2" :data="item" />
				<view v-else />
				<view style="height: 10rpx;"></view>
			</view>
		</swiper-item>
	</swiper>
	<uv-tabbar ref="tabbarRef" :iconSize=25 :fixed="true" inactiveColor="#4e4e4e" activeColor="#4e4e4e">
		<uv-tabbar-item text="答题卡" icon="/pages_nbst/static/images/home/edit.png" @click="examCardShow = true" />
		<uv-tabbar-item text="收藏"
			:icon="fav ? '/pages_nbst/static/images/my/fav-active.png': '/pages_nbst/static/images/my/fav.png'"
			@click="onClickFav" />
	</uv-tabbar>
	<LingExamCard2 v-if="examCardShow" :localdata="dataList" @cancel="examCardShow = false"
		@success="examCardShow = false" @click1="onClickJumpQ" />
</template>

<style scoped lang="scss">
</style>

<style>
	page {
		height: 100%;
	}
</style>